<template>
  <div class="container">
    <button class="button-main" @click="handleAllMatches">全部赛事</button>

    <div class="section" v-for="(section, index) in sections" :key="index">
      <div class="section-header">
        <div class="section-title">{{ section?.sportName }}</div>
        <div class="section-matches">今日 111 场比赛</div>
      </div>

      <div class="buttons-container">
        <button
          class="button-secondary"
          @click="showAll(section)"
          :class="{ selected: isSelectedAll(section?.sportId) }"
        >
          全部
        </button>
        <button
          class="button-secondary"
          v-for="(item, idx) in section.showItems
            ? section.leagueList
            : section.leagueList.slice(0, initialVisibleItems)"
          :key="item.leagueId"
          :class="{ selected: isSelected(section?.sportId, item?.leagueId) }"
          @click="handleItemClick(section.sportId, item.leagueId, item.leagueName)"
        >
          {{ item.leagueName }}
        </button>
      </div>

      <button
        v-if="section.leagueList.length > initialVisibleItems"
        class="button-expand"
        @click="toggleExpand(section)"
      >
        {{ section.showItems ? '收起' : '展开' }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { reactive, defineProps, defineEmits, watch, ref } from 'vue'
const props = defineProps(['list'])

// const myEmits = defineEmits(['selectCategory'])
const initialVisibleItems = 8 // 初始显示的项目数量

const sections = ref([])

const handleAllMatches = () => {
  //   alert('点击了全部赛事')
}

// 修正后的 handleItemClick 方法，使用 sportId 和 leagueId 作为参数
const handleItemClick = (sportId, leagueId, leagueName) => {
  selectedLeague.sportId = sportId
  selectedLeague.leagueId = leagueId
  emit('selection-change', { sportId, leagueId })
}
// 展示当前运动类型的所有联赛
const showAll = (section) => {
  selectedLeague.sportId = section.sportId
  selectedLeague.leagueId = null
  section.showItems = true
  emit('selection-change', { sportId: section.sportId, leagueId: section.leagueId })
}

// 检查某个联赛是否被选中
const isSelected = (sportId, leagueId) => {
  return selectedLeague.sportId === sportId && selectedLeague.leagueId === leagueId
}

// 检查是否选中了全部
const isSelectedAll = (sportId) => {
  return selectedLeague.sportId === sportId && selectedLeague.leagueId === null
}

// const totalMatches = (leagueList) => {
//   return leagueList.reduce((total, league) => total + league.count, 0)
// }

const toggleExpand = (section) => {
  section.showItems = !section.showItems
}

// 追踪选中的联赛
const selectedLeague = reactive({
  sportId: null,
  leagueId: null
})

watch(
  () => props.list,
  (newData) => {
    console.log(newData, 'newData')
    // const data = newData.map((val, index) => {
    //   res.leagueList.push({})
    // })
    sections.value = newData
  }
)

const emit = defineEmits(['selection-change'])

// 将选中的内容 emit 出去
// const emitSelection = (sportId, leagueId) => {
//   selectedLeague.sportId = sportId
//   selectedLeague.leagueId = leagueId

//   // 触发 selection-change 事件，传递选中的 sportId 和 leagueId
//   emit('selection-change', { sportId, leagueId })
// }
</script>

<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;
  //   width: 300px;
  //   padding: 10px;
  //   background-color: #f8f8f8;
  border: 1px solid #e8ebf0;

  width: 250px;
  // max-height: 703px;
  height: 100%;
  border-radius: 8px;
  overflow: scroll;
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
  overflow-y: auto;
  //   background: url('@/assets/icons/schedule-cate-bg.webp') no-repeat;
  background-position: -10px;
  background-size: 100% auto;
  background-color: #fff;
  &::-webkit-scrollbar {
    display: none;
  }
}

.button-main {
  background-color: #16b13a;
  color: white;
  //   padding: 10px;
  //   margin-bottom: 20px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  //   width: 100%;
  width: 208px;
  height: 26px;
  line-height: 26px;
  margin: 20px auto;
  font-weight: 500;
  font-size: 12px;
  color: #ffffff;
}

.section {
  //   margin-bottom: 20px;
  margin: 0px 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 14px;
  color: #525a79;
}

.section-title {
  font-weight: 500;
  font-size: 14px;
  color: #525a79;
}

.section-matches {
  //   font-size: 14px;
  //   color: #888;
  font-weight: 400;
  font-size: 12px;
  color: #afb8cb;
}

.buttons-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 一行3个按钮 */
  gap: 5px; /* 设置按钮之间的间距 */
  //   gap: 5px;
}

.button-secondary {
  width: 65px;
  height: 26px;
  padding: 5px;
  margin: 2px 0;
  background-color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  //   font-size: 14px;
  font-weight: 400;
  font-size: 12px;
  color: #afb8cb;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #afb8cb;
}

.button-secondary.selected {
  background-color: rgba(22, 177, 58, 1);
  color: white;
  border-radius: 4px;
  border: 1px solid rgba(152, 245, 172, 1);
}

.button-expand {
  margin-top: 10px;
  //   padding: 5px;
  //   background-color: #f0f0f0;
  //   border: dashed 2px #ccc;
  border-radius: 5px;
  width: 100%;
  cursor: pointer;
  width: 208px;
  height: 22px;
  background: #eaf0ff;
  border-radius: 4px 4px 4px 4px;
  font-weight: 400;
  font-size: 12px;
  color: #afb8cb;
  line-height: 22px;
  border: none;
  margin-bottom: 10px;
}
</style>
